<template>
  <el-container class="muzi" v-loading="show.loading">
    <el-header>
      <div class="left-panel">
        <el-row :gutter="5">
          <el-col :span="12">
            <el-date-picker v-model="search.ym" type="month" placeholder="薪资日期" style="width: 100%" @change="onChangeMonth"/>
          </el-col>
          <el-col :span="12">
            <el-dropdown split-button type="primary" :disabled="!search.ym || identityList.length === 0" @click="onCalculateTax" size="default" @command="onCommandHandle">
              个税计算
              <template #dropdown>
                <el-dropdown-menu>
                  <el-dropdown-item :disabled="identityList.length === 0" :command="{action: 'export-salary'}">
                    <el-icon><el-icon-download/></el-icon>导出正常工资薪金所得
                  </el-dropdown-item>
                  <el-dropdown-item :disabled="identityList.length === 0" :command="{action: 'export-information'}" divided>
                    <el-icon><el-icon-download/></el-icon>导出人员信息采集表
                  </el-dropdown-item>
                </el-dropdown-menu>
              </template>
            </el-dropdown>
          </el-col>
        </el-row>
      </div>
      <div class="right-panel">
        <div class="right-panel-search">
          <el-select v-model="search.clienteleId" placeholder="请选择客户" @change="onClientele" style="width: 165px">
            <el-option v-for="item in filter.clienteleList" :key="item.id" :label="item.name" :value="item.id"/>
          </el-select>
          <el-select v-model="search.projectId" placeholder="请选择项目" @change="onProject" style="width: 165px">
            <el-option v-for="item in filter.projectList" :key="item.id" :label="item.name" :value="item.id"/>
          </el-select>
          <el-input v-model="search.keyword" placeholder="请输入关键字" style="width: 165px" class="tax-search-name" @blur="onSearch()" clearable/>
          <el-button type="primary" icon="el-icon-search" :loading="search.loading" @click="onSearch()"/>
        </div>
      </div>
    </el-header>
    <el-main>
      <el-table :data="pager.dataList" border @selection-change="onSelection">
        <el-table-column type="selection" width="55"/>
        <el-table-column prop="project" label="项目" align="center"/>
        <el-table-column prop="name" label="姓名" align="center"/>
        <el-table-column prop="identity" label="证件号码" align="center" width="150"/>
        <el-table-column label="一月份" align="center">
          <el-table-column prop="jan" label="工资" align="center"/>
          <el-table-column prop="janTax" label="个税" align="center"/>
        </el-table-column>
        <el-table-column label="二月份" align="center">
          <el-table-column prop="feb" label="工资" align="center"/>
          <el-table-column prop="febTax" label="个税" align="center"/>
        </el-table-column>
        <el-table-column label="三月份" align="center">
          <el-table-column prop="mar" label="工资" align="center"/>
          <el-table-column prop="marTax" label="个税" align="center"/>
        </el-table-column>
        <el-table-column label="四月份" align="center">
          <el-table-column prop="apr" label="工资" align="center"/>
          <el-table-column prop="aprTax" label="个税" align="center"/>
        </el-table-column>
        <el-table-column label="五月份" align="center">
          <el-table-column prop="may" label="工资" align="center"/>
          <el-table-column prop="mayTax" label="个税" align="center"/>
        </el-table-column>
        <el-table-column label="六月份" align="center">
          <el-table-column prop="jun" label="工资" align="center"/>
          <el-table-column prop="junTax" label="个税" align="center"/>
        </el-table-column>
        <el-table-column label="七月份" align="center">
          <el-table-column prop="jul" label="工资" align="center"/>
          <el-table-column prop="julTax" label="个税" align="center"/>
        </el-table-column>
        <el-table-column label="八月份" align="center">
          <el-table-column prop="aug" label="工资" align="center"/>
          <el-table-column prop="augTax" label="个税" align="center"/>
        </el-table-column>
        <el-table-column label="九月份" align="center">
          <el-table-column prop="sep" label="工资" align="center"/>
          <el-table-column prop="sepTax" label="个税" align="center"/>
        </el-table-column>
        <el-table-column label="十月份" align="center">
          <el-table-column prop="oct" label="工资" align="center"/>
          <el-table-column prop="octTax" label="个税" align="center"/>
        </el-table-column>
        <el-table-column label="十一月份" align="center">
          <el-table-column prop="nov" label="工资" align="center"/>
          <el-table-column prop="novTax" label="个税" align="center"/>
        </el-table-column>
        <el-table-column label="十二月份" align="center">
          <el-table-column prop="dec" label="工资" align="center"/>
          <el-table-column prop="decTax" label="个税" align="center"/>
        </el-table-column>
        <el-table-column prop="otherLegalDeduct" label="其他合法扣除" align="center"/>
        <el-table-column prop="endowment" label="养老保险个人" align="center"/>
        <el-table-column prop="medical" label="医疗保险个人" align="center"/>
        <el-table-column prop="unemployment" label="失业保险个人" align="center"/>
        <el-table-column prop="accumulation" label="公积金个人" align="center"/>
        <el-table-column prop="exempt" label="月扣基数" align="center"/>
        <el-table-column prop="children" label="子女教育" align="center"/>
        <el-table-column prop="continuing" label="继续教育" align="center"/>
        <el-table-column prop="elderly" label="老人赡养费" align="center"/>
        <el-table-column prop="rent" label="住房租金" align="center"/>
        <el-table-column prop="loans" label="住房贷款利息" align="center"/>
        <el-table-column prop="other" label="其他" align="center"/>
        <el-table-column prop="accumulativeAmount" label="累计应纳税额" align="center"/>
        <el-table-column prop="accumulativeTax" label="累计应纳税金" align="center"/>
        <el-table-column prop="taxAdjust" label="个税调整" align="center"/>
        <!--
        <el-table-column prop="monthAmount" label="本月应纳税额" align="center"/>
        <el-table-column prop="lastAccumulativeTax" label="上月累计应纳税金" align="center"/>
        <el-table-column fixed="right" label="操作" width="145" align="center">
          <template #default="scope">
            <el-button type="primary" icon="el-icon-edit" :disabled="scope.row.audit === '02'" circle @click="onEdit(scope.row)"/>
          </template>
        </el-table-column>
        -->
      </el-table>
      <el-row class="operating" :gutter="5">
        <el-col :span="6" class="pager">
          <el-pagination layout="prev, pager, next" :total="pager.total" @current-change="onSearch"/>
        </el-col>
      </el-row>
    </el-main>
  </el-container>
</template>

<script>
import {dayjs} from "element-plus";

/**
 * 页面施工中
 * @author Yufe
 * @version 1.0
 */
export default {
  name: 'Blank',
  components: {},
  data() {
    return {
      search: {
        keyword: '',
        loading: false,
        clienteleId: '',
        projectId: '',
        reset: function () {
          this.projectId = '';
        }
      },
      filter: {
        teamList: [],
        projectList: [],
        clienteleList: []
      },
      pager: {
        total: 0,
        dataList: [],
        clean: function () {
          this.total = 0;
          this.dataList.length = 0;
        },
        fill: function ({total, dataList}) {
          this.total = total;
          this.dataList = dataList;
        }
      },
      template: false,
      show: {
        loading: false,
      },
      identityList: []
    }
  },
  mounted() {
    // 初始化客户列表
    this.$API.clientele.list.get().then(res => {
      if (res.success) this.filter.clienteleList = res.data;
    })
    this.onSearch();

    this.initSalaryTemplate();
  },
  computed: {},
  methods: {
    onSearch(number = 1) {
      this.$API.salary.statistic.pager.get({...this.search, number}).then(res => {
        if (res.success) {
          this.pager.fill(res.data)
        }
      })
    },
    onClientele(value) {
      this.search.reset()
      this.$API.project.list.get({id: value}).then(res => {
        if (res.success) {
          this.filter.projectList = res.data;
          if (this.filter.projectList.length === 0) {
            this.$message.warning("该客户还没有项目");
            this.filter.projectList.length = 0
            this.filter.teamList = 0;
          }
        }
      });
    },
    onProject(value) {
      const current = this.filter.projectList.find(ele => ele.id === value);
      if (current.teamList.length > 0) {
        this.filter.teamList = current.teamList;
      } else this.filter.teamList = 0;
    },
    initSalaryTemplate() {
      if ((this.template = localStorage['salary-template-url']) === undefined) {
        this.$API.salary.template.get().then(res => {
          if (res.success) {
            this.template = res.data.url;
            localStorage['salary-template-url'] = res.data.url
          }
        })
      }
    },
    onSelection(values) {
      this.identityList = values.map(ele => ele.identity);
    },
    onCalculateTax() {
      this.$API.salary.tax.post({identityList: this.identityList}).then(res => {
        if (res.success) {
          this.$message.success("计算完成")
          if (res.success) this.onSearch()
        } else {
          this.$alert(res.message, "提示", {type: 'error'})
        }
      })
    },
    /**
     * 导出正常工资薪金所得
     *
     * <br><i>发起导出后，轮询导出结果</i>
     */
    onExportSalary() {
      this.show.exporting = true;
      this.$API.salary.exports.post({idList: this.identityList}).then(res => {
        if (res.success) {
          window.open(`/download/${res.data.name}`, "_blank");
        }
      })
    },
    onExportInformation() {
      this.show.exporting = true;
      this.$API.employee.information.exports.post({idList: this.identityList}).then(res => {
        if (res.success) {
          window.open(`/download/${res.data.name}`, "_blank");
        }
      }).finally(() => {
        this.show.exporting = false;
      })
    },
    onCommandHandle({ action }) {
      switch (action) {
        case 'export-salary':
          this.onExportSalary();
          break;
        case 'export-information':
          this.onExportInformation();
          break;
        default:
          console.warn('未知的动作 >>> %s', action);
      }
    },
    /**
     * 日期选择事件
     *
     * @version 1.0
     * @param value
     */
    onChangeMonth(value) {
      const date = dayjs(value)
      this.search.year = date.year();
      this.search.month = date.month() + 1;
      console.info('检索条件 >>> %o', this.search)
    }
  }
}
</script>

<style lang="less" scoped>
.muzi {
  .el-empty {
    width: 100%;
  }

  .right-panel {
    .tax-search-name {
      width: 245px;
    }
  }

  .el-main {
    padding: 3px;
  }

  .operating {
    padding: 15px 10px;

    .el-button--large {
      width: 50%;
    }
  }
}
</style>
